<template>
  <div>
    <h1>Dashboard page</h1>
    <svg-icon icon-class="bug"></svg-icon>
    <!-- icon-class svg图标名称 class-name 额外的自定义类名 @click绑定事件 -->
    <svg-icon
      icon-class="404"
      class-name="custom-class"
      @click="sayHi"
    ></svg-icon>
    <el-button>按钮</el-button>
    <input type="text" name="" id="">
    <div> {{t("route.Dashboard")}} </div>
    <el-button @click="toggle('zh')">点击切换中文</el-button>
    <el-button @click="toggle('en')">点击切换英文</el-button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";

defineOptions({ name: "Dashboard" });

const { t, locale: i18nLanguage  } = useI18n()

const toggle = (languageKey: string) => {
  i18nLanguage.value = languageKey  // zh en
}

// import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance()!;
const sayHi = () => {
  proxy?.$message.success("恭喜你，这是一条成功消息");
};
</script>
<style lang="scss">
.custom-class {
 // 自定义样式404
  font-size: 200px;
  color: green;
}
</style>